<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="text" id="input">

    <form id="myform" onsubmit="submit">
        账号：<input type="text" name="username"></br>
        密码：<input type="text" name="password"></br>
        <button>登录</button>
        <button id="resetbtn">重置</button>
    </form>

</body>

</html>
<script>
    //表单事件是在使用表单元素及输入框元素可以监听的一系列事件
    //inpput 事件 当<input>、<select>、<textarea>的值发生变化时触发，对于复选框（<input type="checbox>"）
    // 或单选框（<input type="radio">），用户改变时，也会触发这个事件
    //input 事件的一个夜特点，就是会连续触发，比如用户每按下一次按键，就会触发一次input事件 实时监听触发
    var input = document.getElementById("input");
    input.oninput = function (Event) {
        console.log(Event.target.value);
    }

    //select 事件当在<input>、<textarea>里面选中文本时触发
    input.onselect = function () {
        console.log("选中了")
    }

    //change 事件当<input>、<select>、<textarea>的值发生变化时触发。它与input事件的最大不同，
    //就是不会连续触发，只有当全部修改完成时才会触发 失去焦点或回车的时候触发
    input.onchange = function (Event) {
        console.log(Event.target.value)
    }

    //reset submit事件这个两个事件发生在表单对象<form>上，而不是发生在表单的成员上
    //reset事件当表单重置（所有表单成员变回默认值）时触发
    //submit事件当表单数据向服务器提交时触发，注意，submit事件的发生对象时<form>元素，而不是<button>元素
    //因为提交的是表单，而不是按钮
    var resetbtn = document.getElementById("resetbtn");
    var myform = document.getElementById("myform");
    resetbtn.onclick = function (Event) {
        Event.preventDefault();
        myform.reset();
        console.log("重置了")
    }

    function submit() {
        console.log("提交了")
    }
 
</script>